<template>
  <div
    id="jcLoading"
    v-if="hvisble"
    class="loading-contoiner"
    :style="{
      backgroundColor: loadingOption.mask ? 'rgba(0,0,0,0.5)' : 'transparent',
    }"
    :aria-hidden="hvisble"
    aria-label="loading"
  >
    <div
      role="img"
      :aria-hidden="hvisble"
      aria-label="img in loading"
      class="jc_loading_contoiner_img"
      :style="{
        backgroundImage: 'url(' + dengtaGif + ')',
      }"
    ></div>
  </div>
</template>

<script>
import dengtaGif from "@/assets/dengta.gif";
export default {
  name: "js-loading",
  props: {
    visble: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["show", "close"],
  data() {
    return {
      dengtaGif,
      hvisble: true,
      loadingOption: {
        mask: true,
      },
    };
  },
  methods: {
    init() {
      window.addEventListener("hashchange", this.close);
    },
    close() {
      this.$emit("close");
    },
  },
  mounted() {
    this.init();
  },
  unmounted() {
    window.removeEventListener("hashchange", this.close);
  },
};
</script>

<style scoped>
.loading-contoiner {
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  position: fixed;
  z-index: 2000;
  top: 0px;
  left: 0px;
}
.jc_loading_contoiner_img {
  position: fixed;
  width: 60px;
  height: 60px;
  top: calc(50vh - 30px);
  left: calc(50vw - 30px);
  background-repeat: no-repeat;
  background-position: -43px center;
  background-size: 250%;
  border-radius: 30px;
  z-index: 2001;
}
</style>
